<template>
  <div class="dashboard-container">
    <div class="main-container">
      <div class="main_left">
        <el-card shadow="never" class="box" style="width: 400px" body-style="height:100%;">
          <div class="title">设备告警数量</div>
          <div id="alarmMonitoring" style="width: 100%; height: calc(100% - 27px)"></div>
        </el-card>
        <el-card shadow="never" class="box" style="width: 400px" body-style="height:100%;">
          <div class="title">客户设备统计</div>

          <div id="alarmMonitoring2" style="width: 100%; height:  calc(100% - 27px)"></div>
        </el-card>
      </div>
      <div class="main_center">
        <el-card shadow="never" class="box" style="width: 100%" body-style="height:100%;">
          <div id="trajectoryMap" style="width: 100%; height: 100%"></div>
        </el-card>
      </div>
      <div class="main-right">
        <el-card shadow="never" class="box" style="width: 400px" body-style="height:100%;">
          <div class="title">设备概况</div>
          <div class="content">
            <ul>
              <li>
                <div class="teat">设备总数</div>
                <div class="values">{{ total }}个</div>
              </li>
              <li>
                <div class="teat">离线</div>
                <div class="values">{{ offline }}个</div>
              </li>
              <li>
                <div class="teat">未处理报警</div>
                <div class="values"> {{ unprocess }} 个</div>
              </li>
              <li>
                <div class="teat">今日报警</div>
                <div class="values"> {{ today }} 个</div>
              </li>
            </ul>
          </div>
        </el-card>
        <el-card shadow="never" class="box" style="width: 400px" body-style="height:100%;">
          <div class="title">设备平台到期概况</div>
          <div id="alarmMonitoring3" style="width: 100%; height: calc(100% - 27px)"></div>
        </el-card>
        <el-card shadow="never" class="box" style="width: 400px" body-style="height:100%;">
          <div class="title">系统消息</div>
          <div class="system">
            <div class="SystemMessages">
              <img src="@/assets/u126.png" alt="" />
              <div>暂无告警</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "dashboard",
  inheritAttrs: false,
});
import LogAPI, { ExpireData } from "@/api/home";
import { initMap } from "@/common/map";
import * as echarts from "echarts";

const chart: Ref<echarts.ECharts | null> = ref(null);
const echartsdata: Ref<echarts.ECharts | null> = ref(null);
const echartsdata2: Ref<echarts.ECharts | null> = ref(null);
let _AMap: any = null;
let _map: any = null;
/** 未处理报警 */
let unprocess = ref(0);
/* 今日报警 */
let today = ref(0);
/** 设备总数 */
let total = ref(0);
/* 离线>7天 */
let offline = ref(0);

async function setMap() {
  const { AMap, map } = await initMap("trajectoryMap");
  _AMap = AMap;
  _map = map;
}

/** 设置图表  */
const setChartOptions = (data: Array<any>) => {
  if (!chart.value) {
    return;
  }
  const options = {
    title: {
      left: "center",
      textStyle: {
        color: "#FFFFFF",
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      width: "100%",
      bottom: 0,
      textStyle: {
        color: "#333",
        rich: {
          a: {
            width: 66,
            height: 12,
            backgroundColor: "transparent", // 一定要设置，不然不生效
            padding: [0, 20, 0, 0],
          },
        },
      },
      formatter: (params: string) => {
        return `{a|${params}}`;
      },
    },
    series: [
      {
        type: "pie",
        radius: "50%",
        data: data,
        label: {
          color: "#FFFFFF", // 设置标签文字为白色
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
    textStyle: {
      color: "#FFFFFF",
    },
  };

  chart.value.setOption(options);
};
/** 设置图表2  */
const setChartOptions2 = (data: Array<any>) => {
  if (!echartsdata.value) {
    return;
  }
  let chartData = data;
  console.log(chartData);
  // 名称
  let nameArray: any[] = [];
  // 放大一定倍数的总数量
  let totalArray: any[] = [];
  let realNumArray: any[] = [];
  // 最大值
  let maxTotal = 1000;

  chartData.forEach((ele) => {
    if (ele.value > maxTotal) {
      maxTotal = ele.value;
    }
    realNumArray.push(ele.value);
    nameArray.push(ele.name);
  });
  if (maxTotal < 10) {
    maxTotal = 10;
  } else if (maxTotal < 1000) {
    // 需要用0占2位
    let mult = Math.pow(10, 2);
    // 向上取整
    maxTotal = Math.ceil(maxTotal / mult) * mult;
  } else {
    // 取500的倍数
    maxTotal = Math.ceil(maxTotal / 1000) * 1000;
  }
  chartData.forEach((ele) => {
    totalArray.push(maxTotal);
  });

  const options = {
    grid: {
      top: "10",
      bottom: 0,
      height: "100%",
      left: 40,
      right: 40,
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        show: true,
        inverse: true,
        axisLabel: {
          show: false,
          textStyle: {
            color: "rgba(255,255,255,.6)",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: nameArray,
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          textStyle: {
            color: "#ffffff",
            fontSize: "12",
          },
          align: "right",
          padding: [0, 8, 0, 0],
          verticalAlign: "bottom",
          lineHeight: 36,
          formatter: function (value: string, index: number) {
            return `{a|${value}}`;
          },
          rich: {
            a: {
              color: "#00BAFF",
              fontSize: "14",
              fontFamily: "PingFangSC-Regular",
              padding: [0, 0, 7, 0],
            },
          },
        },
        data: realNumArray,
      },
    ],
    series: [
      {
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: "#12c9fe",
              },
              {
                offset: 1,
                color: "#B3F3FF",
              },
            ]),
          },
        },
        barWidth: 15,
        data: chartData,
        label: {
          normal: {
            color: "#fff",
            show: true,
            position: [0, "-23px"],
            textStyle: {
              fontSize: "12",
              fontFamily: "SourceHanSansCN-Regular",
              color: "rgba(255,255,255,.7)",
            },
            formatter: function (value: any) {
              return `{a|${value.name}}`;
            },
            rich: {
              a: {
                fontSize: "14",
                fontFamily: "SourceHanSansCN-Regular",
                color: "rgba(255,255,255,.7)",
                padding: [0, 0, 4, 0],
              },
            },
          },
        },
      },
    ],
  };

  echartsdata.value.setOption(options);
};
/** 设置图表3  */
const setChartOptions3 = (data: ExpireData) => {
  if (!echartsdata2.value) {
    return;
  }
  const options = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
      bottom: "1%",
      textStyle: {
        color: "#FFFFFF",
      },
    },
    series: [
      {
        type: "pie",
        radius: ["30%", "60%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },

        labelLine: {
          show: false,
        },
        left: "30%",
        data: [
          { value: data.expiredCount, name: "已到期" },
          { value: data.expiringInSevenDays, name: "7天内到期" },
          { value: data.expiringInThirtyDays, name: "30天内到期" },
        ],
      },
    ],
    textStyle: {
      color: "#FFFFFF",
    },
  };

  echartsdata2.value.setOption(options);
};

/** 窗口大小变化时，重置图表大小 */
const handleResize = () => {
  setTimeout(() => {
    if (chart.value) {
      chart.value.resize();
    }
    if (echartsdata.value) {
      echartsdata.value.resize();
    }
    if (echartsdata2.value) {
      echartsdata2.value.resize();
    }
  }, 100);
};
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
});
onMounted(() => {
  setMap();

  chart.value = markRaw(
    echarts.init(document.getElementById("alarmMonitoring") as HTMLDivElement)
  );
  echartsdata.value = markRaw(
    echarts.init(document.getElementById("alarmMonitoring2") as HTMLDivElement)
  );
  echartsdata2.value = markRaw(
    echarts.init(document.getElementById("alarmMonitoring3") as HTMLDivElement)
  );
  LogAPI.getVisitStats().then((data) => {
    console.log('首页', data);
    unprocess.value = data.unprocess;
    today.value = data.today;
    setChartOptions(data.statistics);
  });
  LogAPI.getCustomerDeviceData().then((data) => {
    total.value = data.total;
    offline.value = data.offline;
    setChartOptions2(data.custom);
  });
  LogAPI.getExpireData().then((data) => {
    setChartOptions3(data);
    console.log(data,'0000');
    
  });

  window.addEventListener("resize", handleResize);
});

</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;
  height: calc(100vh - 50px - 70px);
  box-sizing: border-box;

  .title {
    text-align: center;
    font-size: 18px;
  }

  .main-container {
    display: flex;
    justify-content: space-between;
    height: 100%;

    :deep(.el-card__body) {
      padding: 10px !important;
    }

    .main_left {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .box {
        height: 49%;
      }
    }

    .main-right {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .box {
        height: 32%;
        position: relative;



        .system {
          height: calc(100% - 27px);

          .SystemMessages {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            img {
              width: 81px;
              height: 62px;
            }
          }
        }

        .content {
          margin-top: 20px;
          position: relative;

          ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            padding: 0 30px;

            li {
              width: 50%;
              text-align: center;
              margin: 10px 0;

              .teat {
                font-size: 14px;
                margin: 5px 0 8px 0;
              }

              .values {
                color: #2ec7c9;
              }
            }
          }
        }
      }
    }

    .main_center {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      margin: 0 15px;

      .box {
        height: 100%;
      }
    }
  }
}
</style>
